<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列宽调整功能测试</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .demo-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        .demo-table th,
        .demo-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #eee;
            position: relative;
        }
        
        .demo-table th {
            background-color: #f8f9fa;
            font-weight: 600;
            cursor: default;
        }
        
        /* 调整手柄样式 */
        .resizable-header {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
        }
        
        .resize-handle {
            position: absolute;
            right: 0px;
            top: 0px;
            bottom: 0px;
            width: 8px;
            cursor: col-resize;
            background-color: transparent;
            z-index: 100;
            border-right: 2px solid transparent;
            transition: border-color 0.2s ease, background-color 0.2s ease;
        }
        
        .resize-handle:hover {
            border-right-color: #18a058;
            background-color: rgba(24, 160, 88, 0.1);
        }
        
        .resize-handle:active {
            border-right-color: #18a058;
            background-color: rgba(24, 160, 88, 0.2);
        }
        
        /* 表头悬停效果 */
        .demo-table th:hover .resize-handle {
            border-right-color: #18a058;
            background-color: rgba(24, 160, 88, 0.05);
        }
        
        .highlight-box {
            background: #e8f5e8;
            border: 2px solid #18a058;
            padding: 15px;
            margin: 20px 0;
            border-radius: 6px;
        }
        
        .step {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            padding: 15px;
            margin: 10px 0;
            border-radius: 6px;
        }
        
        .step h3 {
            margin: 0 0 10px 0;
            color: #856404;
        }
        
        .arrow {
            color: #18a058;
            font-size: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📋 列宽调整功能使用教程</h1>
        
        <div class="highlight-box">
            <h2>🎯 功能说明</h2>
            <p>在表格的表头区域，每列的<strong>右边缘</strong>都有一个隐藏的调整手柄，鼠标悬停时会显示绿色边框，点击拖动即可调整列宽。</p>
        </div>
        
        <div class="step">
            <h3>步骤 1：找到调整手柄</h3>
            <p>将鼠标慢慢移动到下方表格表头的<strong>右边缘</strong>，特别是列名文字的右侧边界处。</p>
        </div>
        
        <div class="step">
            <h3>步骤 2：观察视觉变化</h3>
            <p>当鼠标位置正确时，您会看到：</p>
            <ul>
                <li>🔍 鼠标光标变成双向箭头 <span style="font-size: 16px;">↔️</span></li>
                <li>🟢 出现绿色的垂直边框线</li>
                <li>📍 区域轻微变色（淡绿色背景）</li>
            </ul>
        </div>
        
        <div class="step">
            <h3>步骤 3：拖动调整</h3>
            <p>找到调整手柄后：</p>
            <ul>
                <li>🖱️ 按住鼠标左键</li>
                <li>⬅️ 向左拖动 = 缩小列宽</li>
                <li>➡️ 向右拖动 = 增大列宽</li>
                <li>🔄 松开鼠标完成调整</li>
            </ul>
        </div>

        <h2>🧪 测试表格</h2>
        <p><strong>试试看：</strong>将鼠标移动到下方表头各列的右边缘，寻找调整手柄！</p>
        
        <table class="demo-table">
            <thead>
                <tr>
                    <th style="width: 60px;">
                        <div class="resizable-header">
                            <span>ID</span>
                            <div class="resize-handle" title="拖动调整列宽"></div>
                        </div>
                    </th>
                    <th style="width: 200px;">
                        <div class="resizable-header">
                            <span>标题</span>
                            <div class="resize-handle" title="拖动调整列宽"></div>
                        </div>
                    </th>
                    <th style="width: 120px;">
                        <div class="resizable-header">
                            <span>作者</span>
                            <div class="resize-handle" title="拖动调整列宽"></div>
                        </div>
                    </th>
                    <th style="width: 100px;">
                        <div class="resizable-header">
                            <span>状态</span>
                            <div class="resize-handle" title="拖动调整列宽"></div>
                        </div>
                    </th>
                    <th style="width: 160px;">
                        操作
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>示例新闻标题</td>
                    <td>张三</td>
                    <td>已发布</td>
                    <td>查看 编辑 删除</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>另一个新闻标题</td>
                    <td>李四</td>
                    <td>待审核</td>
                    <td>查看 编辑 删除</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>第三条新闻标题</td>
                    <td>王五</td>
                    <td>草稿</td>
                    <td>查看 编辑 删除</td>
                </tr>
            </tbody>
        </table>
        
        <div class="highlight-box">
            <h2>🔍 寻找技巧</h2>
            <ul>
                <li><strong>精确定位</strong>：调整手柄位于每列表头的最右侧，宽度约8像素</li>
                <li><strong>鼠标形状</strong>：正确位置时鼠标会变成 ↔️ 双向箭头</li>
                <li><strong>视觉反馈</strong>：悬停时会出现绿色边框和淡色背景</li>
                <li><strong>慢慢移动</strong>：不要着急，慢慢移动鼠标到列的边界处</li>
            </ul>
        </div>
        
        <div class="step">
            <h3>⚠️ 注意事项</h3>
            <ul>
                <li>最后一列（操作列）通常不可调整</li>
                <li>每列都有最小和最大宽度限制</li>
                <li>调整后的宽度会自动保存</li>
                <li>可以使用"重置列宽"按钮恢复默认设置</li>
            </ul>
        </div>
        
        <div class="highlight-box">
            <h2>🎊 成功标志</h2>
            <p>当您能够成功拖动并改变列宽时，就说明功能正常工作了！列宽的变化应该是即时可见的。</p>
        </div>
        
        <hr style="margin: 40px 0; border: none; border-top: 2px solid #eee;">
        
        <p style="text-align: center; color: #666; font-size: 14px;">
            如果按照以上步骤仍然无法找到调整手柄，请检查浏览器开发者工具中是否有JavaScript错误。
        </p>
    </div>

    <script>
        // 添加简单的拖拽功能演示
        let isResizing = false;
        let currentColumn = null;
        let startX = 0;
        let startWidth = 0;
        
        document.querySelectorAll('.resize-handle').forEach(handle => {
            handle.addEventListener('mousedown', function(e) {
                isResizing = true;
                currentColumn = this.parentElement.parentElement;
                startX = e.clientX;
                startWidth = parseInt(getComputedStyle(currentColumn).width);
                
                document.addEventListener('mousemove', handleMouseMove);
                document.addEventListener('mouseup', handleMouseUp);
                e.preventDefault();
            });
        });
        
        function handleMouseMove(e) {
            if (!isResizing || !currentColumn) return;
            
            const deltaX = e.clientX - startX;
            const newWidth = Math.max(80, startWidth + deltaX);
            currentColumn.style.width = newWidth + 'px';
        }
        
        function handleMouseUp() {
            isResizing = false;
            currentColumn = null;
            document.removeEventListener('mousemove', handleMouseMove);
            document.removeEventListener('mouseup', handleMouseUp);
        }
    </script>
</body>
</html>